<template>
  <div>
    <el-divider content-position="left">城市站点配置</el-divider>
  <el-row>
    <el-button type="primary" plain @click="open()">打开地图</el-button>
    <el-divider content-position="left">配置信息</el-divider>
  </el-row>
    <div class="page-item  page-callrecords">
      <div class="page-content" ref="pageTab">
        <div class="page-tab">
          <el-form :model="selectForm" ref="selectForm"  label-width="85px" class="form">
            <el-form-item label="站点名称：" class="form-item">
              <el-input v-model="selectForm.name" placeholder="请输入站点名称" style="width: 200px"></el-input>
              <el-button type="primary" icon="el-icon-search" class="form-btn" @click="onSelect()">搜索</el-button>
            </el-form-item>
<!--            <el-button type="primary" icon="el-icon-plus" class="form-btn" @click="onAddRow()">添加</el-button>-->
          </el-form>
          <!-- 表格试视图 v-if="cutLayout"-->
          <el-table
            :data="tableDataList"
            style="width: 100%;height: 60%"

            border
            :header-cell-style="{ background: '#00abbe', color: '#fff' }"
          >
            <el-table-column prop="id" label="id" width="50" align="center"></el-table-column>
            <el-table-column align="center" prop="name" label="站点名称"></el-table-column>
            <el-table-column align="center" prop="lng" min-width="100" label="经度">

            </el-table-column>
            <el-table-column align="center" prop="lat" min-width="100" label="纬度">

            </el-table-column>
            <el-table-column align="center" prop="address" width="226" min-width="170" label="详细地址">

            </el-table-column>
<!--            <el-table-column align="center" prop="remark" label="备注"></el-table-column>-->
            <el-table-column align="center" label="操作" width="190">
              <template slot-scope="scope"> <!-- size="small" -->
                <el-button
                  size="mini" class="operation-btn" round
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button>
                <el-button
                  size="mini" class="operation-btn operation-btn-delete" round
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row )"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="5"
            layout="prev, pager, next,  sizes, total, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
<!--       新增 编辑 窗口 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" class="change-pwd" style="width:1300px;" >
        <table>
          <tr>
            <td width="100px;">    </td>
            <td>
              <el-form :model="dialogForm" ref="dialogForm">
                <el-form-item label="站点名称：" class="form-item">
                  <el-input v-model="dialogForm.name" placeholder="请输入站点名称"></el-input>
                </el-form-item>
                <el-form-item label="经度" class="form-item">
                  <el-input v-model="dialogForm.lng" placeholder="请输入经度"></el-input>
                </el-form-item>
                <el-form-item label="纬度" class="form-item">
                  <el-input v-model="dialogForm.lat" placeholder="请输入纬度"></el-input>
                </el-form-item>
                <el-form-item label="地址" class="form-item">
                  <el-input v-model="dialogForm.address" placeholder="请输入详细地址"></el-input>
                </el-form-item>
<!--                <el-form-item label="备注" class="form-item">-->
<!--                  <el-input v-model="dialogForm.remark" placeholder="请输入备注"></el-input>-->
<!--                </el-form-item>-->
              </el-form>
              <div>
                <el-button @click="dialogCancel()">取消</el-button>
                <el-button
                  type="primary"
                  v-on:click="dialogSave()"
                  :loading="addLoading"
                >保存</el-button>
              </div>
            </td>
          </tr>
        </table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  var _index; //定义一个全局变量，以获取行数据的行号
  export default {
    name: 'site',
    components: {},
    props: {},
    data() {
      return {
        dialogTitle:'',//对话框标题
        dialogVisible: false,//是否显示新增窗口
        dialogForm: [],//对话框中的form 新增和编辑
        pageCurrentNum:'',//当前页码
        addLoading: false,
        selectForm: { //查询条件的form
          name: '',
          // phone: '',
          classify: ''
        },
        tableData: [
          {
            id: '100', classify: '分类一', name: '刘加料', lng: '1381111111', lat: '12877777',
            address: '中国',  operation: ''
          },
          {
            id: '101', classify: '分类二', name: '王国为', lng: '1392222222', lat: '12888888888',
            address: '中国',  operation: ''
          },
          {
            id: '102', classify: '分类一', name: '刘辚中', lng: '1392274422', lat: '12887777788',
            address: '中国',  operation: ''
          },
          {
            id: '103', classify: '分类二', name: '刘珍从', lng: '13922456562', lat: '12883534888',
            address: '中国',  operation: ''
          },
          {
            id: '104', classify: '分类二', name: '李国为', lng: '1392234222', lat: '1282348888',
            address: '中国',  operation: ''
          },
          {
            id: '105', classify: '分类一', name: '王五中', lng: '1392226786722', lat: '109834588',
            address: '中国',  operation: ''
          },
          {
            id: '106', classify: '分类二', name: '贺炜洁', lng: '1392222222', lat: '12888888888',
            address: '中国',  operation: ''
          },
          {
            id: '107', classify: '分类一', name: '刘加料', lng: '1381111111', lat: '12877777',
            address: '中国',  operation: ''
          },
          {
            id: '108', classify: '分类二', name: '王标准', lng: '1392222222', lat: '12888888888',
            address: '中国',  operation: ''
          },
          {
            id: '109', classify: '分类一', name: '刘宵厅', lng: '1392112422', lat: '1288327788',
            address: '中国',  operation: ''
          },
          {
            id: '110', classify: '分类二', name: '刘材料', lng: '139786456562', lat: '122344888',
            address: '中国',  operation: ''
          },
          {
            id: '111', classify: '分类二', name: '李杰杰', lng: '139223422', lat: '128234823288',
            address: '中国',  operation: ''
          },
          {
            id: '112', classify: '分类一', name: '王为要', lng: '1392222346722', lat: '102334588',
            address: '中国',  operation: ''
          },
          {
            id: '113', classify: '分类二', name: '贺炒菜', lng: '1392222222', lat: '12888888888',
            address: '中国',  operation: ''
          },
          {
            id: '114', classify: '分类一', name: '刘加料', lng: '1381111111', lat: '12877777',
            address: '中国',  operation: ''
          },
          {
            id: '115', classify: '分类二', name: '王国为', lng: '1392222222', lat: '12888888888',
            address: '中国',  operation: ''
          },
          {
            id: '116', classify: '分类一', name: '王口水', lng: '1392274422', lat: '12887777788',
            address: '中国',  operation: ''
          },
          {
            id: '117', classify: '分类二', name: '刘中断', lng: '13922456562', lat: '12883534888',
            address: '中国',  operation: ''
          },
          {
            id: '118', classify: '分类二', name: '张灯具', lng: '1392234222', lat: '1282348888',
            address: '中国',  operation: ''
          },
          {
            id: '119', classify: '分类一', name: '张材要', lng: '1392226786722', lat: '109834588',
            address: '中国',  operation: ''
          },
          {
            id: '120', classify: '分类二', name: '王可数', lng: '1392222222', lat: '12888888888',
            address: '中国',  operation: ''
          },
          {
            id: '121', classify: '分类一', name: '李尖凿', lng: '1381111111', lat: '12877777',
            address: '中国',  operation: ''
          },
          {
            id: '122', classify: '分类二', name: '王顶替', lng: '1392222222', lat: '12888888888',
            address: '中国',  operation: ''
          },
          {
            id: '123', classify: '分类一', name: '赵酒店', lng: '1392112422', lat: '1288327788',
            address: '中国',  operation: ''
          },
          {
            id: '124', classify: '分类二', name: '王灯光', lng: '139786456562', lat: '122344888',
            address: '中国',  operation: ''
          },
          {
            id: '125', classify: '分类二', name: '刘耧杰', lng: '139223422', lat: '128234823288',
            address: '中国',  operation: ''
          },
          {
            id: '126', classify: '分类一', name: '李安', lng: '1392222346722', lat: '102334588',
            address: '中国',  operation: ''
          },
          {
            id: '127', classify: '分类二', name: '王为菜', lng: '1392222222', lat: '12888888888',
            address: '中国',  operation: ''
          }
        ],
        tableDataList: [],
        tableDataSelect: [],
        currentPage4: 1,
        tabHeight: 1080,
        total: 20,
        pagetRowNum: 5,//每页显示的行数
        //cutLayout: false,
      }
    },
    computed: {
      //...mapState(['tableDataAllPage'])
    },
    watch: {},

    beforeCreate() {},
    beforeUpdate() {
      this.tabHeight = this.$refs.pageTab.offsetHeight - 137
    },
    beforeMount() {},
    mounted() {
      let _this = this
      window.onresize = function() {
        if (_this.$refs.pageTab) {
          _this.tabHeight = _this.$refs.pageTab.offsetHeight - 137
        }
      }

      this.ListLoadData();//初始化列表
    },
    methods: {
      open: function () {
        this.$router.push({ path: '/siteconfig/MYAMAP' })
      },
      handleSizeChange(val) { //每页显示条数 变化事件
        console.log(`每页的行数 ${val} 条`)
        this.pagetRowNum= val;
        this.ListLoadData();//改变每页的行数则 重新计算列表
      },
      handleCurrentChange(val) { //页码 变化事件
        console.log(`当前页: ${val-1}`)
        this.tableDataList = this.tableDataAllPage[val-1].list;
        this.pageCurrentNum=val;//当前页码
      },
      //初始化 列表数据
      ListLoadData(){
        //-------获取 列表数据 -------Sina API--Axios跨域 Get请求--------------------------------
        var dataLength=0;
        dataLength=this.tableData.length;

        console.log( "总行数: "+this.tableData.length + " " +dataLength );
        /* 分页算法 */
        this.tableDataAllPage=[];
        this.total=dataLength;//总行数
        var pageCount=Math.ceil(dataLength/this.pagetRowNum);//页数=总行数/每页的行数
        console.log( "页数: "+pageCount );
        //遍历所有的分组
        var i=0;
        var y=0
        for(var x=1;x<=pageCount;x++){
          var tabData={"list":[]};
          //console.log("第 "+x+"页---------------------------------------------");
          for(y;y<dataLength;y++){//for(var y in response.data){
            //console.log("插入数据:  "+ y );
            var objList={"id":this.tableData[y].id,"classify":this.tableData[y].classify
              ,"name":this.tableData[y].name
              ,"lng":this.tableData[y].lng,"lat":this.tableData[y].lat
              ,"address":this.tableData[y].address // ,"remark":this.tableData[y].remark
              ,"operation":this.tableData[y].operation
            };
            tabData.list.push(objList);
            //console.log("插入数据: "+response.data[y].userID+" "+response.data[y].userName+" "+response.data[y].userExten+"");
            i++;
            if(i>=x*this.pagetRowNum){//当数页码 * 每页的行数
              //console.log("当数页码:  "+ i +" " + x*this.pagetRowNum );
              y++;//加一
              break;
            }
          }
          this.tableDataAllPage.push(tabData);
        }
        this.tableDataList = this.tableDataAllPage[0].list;
        //--------------------------------------------------------------
      },
      //查询
      onSelect() {
        console.log('onSelect 查询 ' + this.selectForm.name +" "); //  + this.selectForm.phone
        // var url = 'http://localhost:8091/httpCli?action=query'+"&name="+this.selectForm.name+"&phone="+this.selectForm.phone ;
        // this.$http.get(url).then((data) => {
        //   console.log(data)
        //   //this.tableform = data.body;
        // }).catch((err) => {
        //   console.log(err)
        // })
      },
      //新增数据
      onAddRow() {
        _index=-1;//-1为新增
        this.dialogTitle='新增';
        this.dialogVisible = true;
        this.dialogForm = {
          name: '',
          lng: '',
          lat: '',
          address: '',
          // remark: ''
        }
      },
      //编辑数据--------------------------------------------------------
      handleEdit(index, row) {
        console.log("handleEdit index:"+index+"  name:"+row.name);
        this.dialogTitle='编辑';
        this.dialogVisible = true;
        this.dialogForm = Object.assign({}, row);
        _index = index;//用于判断是新增还是编辑
        //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中
      },
      //取消按扭
      dialogCancel() {
        this.dialogVisible = false;//对话框 不显示
      },
      //对话框 保存按钮
      dialogSave(){
        if(_index==-1){
          this.sumbitAddRow(); //保存 新增
        }else{
          this.sumbitEditRow();//保存 编辑
        }
      },
      //将新增的数据添加到表格中
      sumbitAddRow() {
        console.log( "name: "+ this.dialogForm.name);
        var new_id=this.tableData[this.tableData.length-1].id;
        new_id=  parseInt(new_id) + 1;//id 自动加 1
        console.log( "new_id "+ new_id);
        this.tableform = this.tableform || []
        this.tableData.push({
          id: new_id,
          name: this.dialogForm.name,
          lng: this.dialogForm.lng,
          lat: this.dialogForm.lat,
          address: this.dialogForm.address,
          // remark: this.dialogForm.remark,
        })
        //storage.set('url', this.url);
        this.ListLoadData();//重新加载 数据
        this.handleCurrentChange(this.tableDataAllPage.length);//页码变化事件 跳到最后一页
        this.dialogVisible = false;//对话框 不显示
      },
      //保存编辑
      sumbitEditRow() {
        console.log("sumbitEditRow _index:"+_index+"  name:"+this.dialogForm.name);
        this.dialogVisible = false;//对话框 不显示
        //更新当前列表的行内容
        var editData_index = _index;//当前页的行号
        this.tableDataList[editData_index].name = this.dialogForm.name;
        this.tableDataList[editData_index].lng = this.dialogForm.lng;
        this.tableDataList[editData_index].lat = this.dialogForm.lat;
        this.tableDataList[editData_index].address = this.dialogForm.address;
        // this.tableDataList[editData_index].remark = this.dialogForm.remark;

        //同步更新 原始数据
        var edit_id=this.tableDataList[editData_index].id;
        var i=0;
        for(i;i<this.tableData.length;i++){
          //console.log("遍历数据:  "+ this.tableData[i].name );
          if(this.tableData[i].id==edit_id){
            this.tableData[i].name = this.dialogForm.name;
            this.tableData[i].lng = this.dialogForm.lng;
            this.tableData[i].lat = this.dialogForm.lat;
            this.tableData[i].address = this.dialogForm.address;
            // this.tableData[i].remark = this.dialogForm.remark;
          }
        }
        //
      },
      //删除数据-------------------------------------------------
      handleDelete(index, row) {
        console.log("handleDelete index:"+index+"  name:"+row.name);
        this.$confirm('确认要删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //删除
          //第一步 取这个 id 所在的 行号
          var i=0;var del_index=-1;
          for(i;i<this.tableData.length;i++){
            //console.log("遍历数据:  "+ this.tableData[i].name );
            if(this.tableData[i].id==row.id){
              del_index=i;
            }
          }
          console.log( "删除前 总行数: "+this.tableData.length + " "   );
          this.tableData.splice(del_index, 1);
          console.log( "删除后 总行数: "+this.tableData.length + " "   );
          this.ListLoadData();//重新加载 数据
          //console.log( "当前页: "+this.pageCurrentNum + " "   );
          this.handleCurrentChange(this.pageCurrentNum);//跳转至 当前页
          this.$message({ type: 'success', message: '删除成功!', });
        }).catch((err) => {
          if(err!='cancel'){
            this.$message({ type: 'error', message:  '删除失败! '+ err });
          }
        })
      },
      //---------------------------------------------------------------
    }
  }
</script>

<style lang="scss" scoped>
</style>
